<template>
  <div>
   <div>
<el-form :model="search" style=" margin: 20px 0 0 20px;" ref="search" label-width="100px">
  <el-row>
    <el-col :span="6" style=" margin-right: 20px;">
      <el-form-item label="货品">
        <el-input v-model="search.Key" placeholder="请输入货品名称/编号" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="状态">
        <el-select v-model="search.Status" placeholder="请选择" style="width: 100%;">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="停用" value="停用"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button class="cz" type="primary" @click="clear()">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button class="cx" type="primary" @click="query()">查询</el-button>
    </el-col>
  </el-row>
</el-form>
</div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="add()">新增</el-button></div>
<div id="dataDiv">
      <el-table :data="data" class="bian">
        <el-table-column label="序号" prop="p_ProductId"></el-table-column>
        <el-table-column label="货品编号" prop="p_ProductCode"></el-table-column>
        <el-table-column label="货品名称" prop="p_ProductName"></el-table-column>
        <el-table-column label="状态" prop="p_ProductStatus"></el-table-column>
        <el-table-column label="货品类型" prop="p_ProductType"></el-table-column>
        <el-table-column label="规格型号" prop="p_SpecificationModel"></el-table-column>
        <el-table-column label="单位" prop="p_Unit"></el-table-column>
        <el-table-column label="供应商" prop="p_Supplier"></el-table-column>
        <el-table-column label="客户名称" prop="p_CustomerName"></el-table-column>
        <el-table-column label="入库参考价/元" prop="p_InboundPrice"></el-table-column>
        <el-table-column label="出库参考价/元" prop="p_OutboundPrice"></el-table-column>
        <el-table-column label="显示顺序" prop="p_DisplayOrder"></el-table-column>
        <el-table-column label="库存总金额" prop="p_TotalStockValue"></el-table-column>
        <el-table-column label="当前库存" prop="p_CurrentStock"></el-table-column>
        <el-table-column label="保质期管理" prop="p_ShelfLifeManagement"></el-table-column>
        <el-table-column label="保质期" prop="p_ShelfLife"></el-table-column>
        <el-table-column label="预警天数(天)" prop="p_WarningDays"></el-table-column>
        <el-table-column label="操作人" prop="p_PRen"></el-table-column>
        <el-table-column label="操作时间" prop="p_PDate"></el-table-column>
        <el-table-column label="备注" prop="p_ProductDescr" v-if="showIdInput"></el-table-column>
        <el-table-column label="逻辑删除" prop="p_PIsDelete" v-if="showIdInput"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="upd(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
			   v-on:current-change="handleCurrentChange"
			   :current-page="currentPage"
			   :page-sizes="[2, 4, 5, 6]"
			   :page-size="pageSize"
			   layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
    </div>
 <!-- 模态框部分 -->
    <!-- 添加页面 -->
  <el-dialog title="新增" :visible.sync="insert" width="50%">
  <el-form :model="insertAdd" ref="insertFrom" label-width="100px">
  <el-row>
  <el-col :span="24">
        <span class="xin">*</span><el-form-item label="货品名称" prop="Name">
          <el-input v-model="insertAdd.Name"></el-input>
        </el-form-item>
    </el-col>
  </el-row>
  <el-row>
  <el-col :span="12">
        <span class="xin">*</span><el-form-item label="货品编号" prop="Code">
          <el-input v-model="insertAdd.Code" placeholder="自动获取系统编号" disabled readonly></el-input>
        </el-form-item>
    </el-col>
  <el-col :span="12">
      <span class="xinx"></span><el-form-item label="货品分类">
        <el-cascader v-model="insertAdd.hpType"
        :options="options"
        :props="{ checkStrictly:true }"
        v-on:change="handleCascaderChange">
      </el-cascader>
      </el-form-item>
      </el-col>
  </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="规格型号" prop="Model">
          <el-input v-model="insertAdd.Model"></el-input>
        </el-form-item>
      </el-col>
<el-col :span="12">
      <el-form-item label="供应商">
        <el-select v-model="insertAdd.Supplier" placeholder="请选择" style="width: 200px;">
          <el-option
          v-for="item in SutableData"
          :key="item.s_MIndex"
          :label="item.s_MSupplierName"
          :value="item.s_MIndex">
        </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
    <el-form-item label="客户名称">
      <el-select v-model="insertAdd.Customer" placeholder="请选择" style="width: 200px;" >
        <el-option
        v-for="item in tableData"
        :key="item.s_CuNumber"
        :label="item.s_CuName"
        :value="item.s_CuNumber">
      </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
        <el-form-item label="入库参考价/元" prop="Inbound">
          <el-input v-model="insertAdd.Inbound"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
  <el-row>
  <el-col :span="12">
        <el-form-item label="出库参考价/元" prop="Outbound">
          <el-input v-model="insertAdd.Outbound"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示顺序" prop="Order">
          <el-input v-model="insertAdd.Order"></el-input>
        </el-form-item>
      </el-col>
  </el-row>

  <el-row>
  <el-col :span="12">
        <el-form-item label="货品单位" prop="Unit">
          <el-input v-model="insertAdd.Unit"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="当前库存" prop="CurrentStock">
          <el-input v-model="insertAdd.CurrentStock"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
  
  <el-row>
<el-col :span="12">  
    <el-form-item label="状态" prop="Status">  
        <el-radio-group v-model="insertAdd.Status">  
            <el-radio label="启用">启用</el-radio>  
            <el-radio label="停用">停用</el-radio>  
        </el-radio-group>  
    </el-form-item>  
</el-col>
<el-col :span="12">
  <el-form-item label="保质期管理" prop="ShelfLifeManagement">
    <el-radio-group v-model="insertAdd.ShelfLifeManagement">
      <el-radio label="开启">开启</el-radio>  
      <el-radio label="关闭">关闭</el-radio>  
    </el-radio-group>
  </el-form-item>
</el-col>
    </el-row>
    <el-row>
  <el-col :span="12">
        <el-form-item label="保质期" prop="ShelfLife">
          <el-input v-model="insertAdd.ShelfLife"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预警天数(天)" prop="WarningDays">
          <el-input v-model="insertAdd.WarningDays"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Descr">
          <el-input type="textarea" v-model="insertAdd.Descr" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="addFrom">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
<!-- 修改页面 -->
  <el-dialog title="新增" :visible.sync="uinsert" width="50%">
  <el-form :model="insertUpd" ref="insertFrom" label-width="100px">
  <el-row v-if="showIdInput">
  <el-col :span="12">
    <el-form-item label="序号" prop="id">
      <el-input v-model="insertUpd.id"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="逻辑删除" prop="isDelete">
      <el-input v-model="insertUpd.isDelete"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="操作时间" prop="Date">
      <el-input v-model="insertUpd.Date"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="操作人" prop="Ren">
      <el-input v-model="insertUpd.Ren"></el-input>
    </el-form-item>
  </el-col>
   <el-col :span="12">
    <el-form-item label="出库总金额" prop="TotalStockValue">
      <el-input v-model="insertUpd.TotalStockValue"></el-input>
    </el-form-item>
  </el-col>
</el-row>
  <el-row>
  <el-col :span="24">
        <el-form-item label="货品名称" prop="Name">
          <el-input v-model="insertUpd.Name"></el-input>
        </el-form-item>
    </el-col>
  </el-row>
  <el-row>
  <el-col :span="12">
        <el-form-item label="货品编号" prop="Code">
          <el-input v-model="insertUpd.Code"></el-input>
        </el-form-item>
    </el-col>
  <el-col :span="12">
      <el-form-item label="货品分类">
        <el-cascader v-model="insertUpd.hpType"
        :options="options"
        :props="{ checkStrictly:true }"
        v-on:change="handleCascaderChange">
      </el-cascader>
      </el-form-item>
      </el-col>
  </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="规格型号" prop="Model">
          <el-input v-model="insertUpd.Model"></el-input>
        </el-form-item>
      </el-col>
<el-col :span="12">
      <el-form-item label="供应商">
        <el-select v-model="insertUpd.Supplier" placeholder="请选择" style="width: 200px;">
          <el-option
          v-for="item in SutableData"
          :key="item.s_MIndex"
          :label="item.s_MSupplierName"
          :value="item.s_MIndex">
        </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
    <el-form-item label="客户名称">
      <el-select v-model="insertUpd.Customer" placeholder="请选择" style="width: 200px;" >
        <el-option
        v-for="item in tableData"
        :key="item.s_CuNumber"
        :label="item.s_CuManager"
        :value="item.s_CuNumber">
      </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
        <el-form-item label="入库参考价/元" prop="Inbound">
          <el-input v-model="insertUpd.Inbound"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
  <el-row>
  <el-col :span="12">
        <el-form-item label="出库参考价/元" prop="Outbound">
          <el-input v-model="insertUpd.Outbound"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示顺序" prop="Order">
          <el-input v-model="insertUpd.Order"></el-input>
        </el-form-item>
      </el-col>
  </el-row>

  <el-row>
  <el-col :span="12">
        <el-form-item label="货品单位" prop="Unit">
          <el-input v-model="insertUpd.Unit"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="当前库存" prop="CurrentStock">
          <el-input v-model="insertUpd.CurrentStock"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
  
  <el-row>
<el-col :span="12">  
    <el-form-item label="状态" prop="Status">  
        <el-radio-group v-model="insertUpd.Status">  
            <el-radio label="启用">启用</el-radio>  
            <el-radio label="停用">停用</el-radio>  
        </el-radio-group>  
    </el-form-item>  
</el-col>
<el-col :span="12">
  <el-form-item label="保质期管理" prop="ShelfLifeManagement">
    <el-radio-group v-model="insertUpd.ShelfLifeManagement">
      <el-radio label="开启">开启</el-radio>  
      <el-radio label="关闭">关闭</el-radio>  
    </el-radio-group>
  </el-form-item>
</el-col>
    </el-row>
    <el-row>
  <el-col :span="12">
        <el-form-item label="保质期" prop="ShelfLife">
          <el-input v-model="insertUpd.ShelfLife"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预警天数(天)" prop="WarningDays">
          <el-input v-model="insertUpd.WarningDays"></el-input>
        </el-form-item>
      </el-col>
  </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="Descr">
          <el-input type="textarea" v-model="insertUpd.Descr" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col>
        <el-button class="cz" @click="cancel()">取消</el-button>
        <el-button class="cx" @click="updFrom">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data(){
        return{
            data:[],
            tableData:[],//客户名称下拉框
            SutableData:[],//供应商名称下拉框
            options: [],//级联
            //编号
     orderNumber:'',
            value: "",
            insert:false,
            uinsert:false,
            showIdInput: false,
            targetPage: "",
            totalRecords: 10,
            currentPage: 1,
            totalPages: 10,
            pageSize: 10,
            search:{
                Key:'',
                Status:'',
            },
            insertAdd:{
              Name:"",
              Code:"",
              hpType:"",
              Model:"",
              Supplier:"",
              Customer:"",
              Inbound:"",
              Outbound:"",
              Order:"",
              Unit:"",
              CurrentStock:"",
              Status:"启用",
              ShelfLifeManagement:"开启",
              ShelfLife:"",
              WarningDays:"",
              Descr:"",
            },
            insertUpd:{
              id:0,
              isDelete:"",
              Ren:"",
              Date :"",
              Name:"",
              Code:"",
              hpType:"",
              Model:"",
              Supplier:"",
              Customer:"",
              Inbound:"",
              Outbound:"",
              Order:"",
              Unit:"",
              CurrentStock:"",
              TotalStockValue:"",
              Status:"",
              ShelfLifeManagement:"",
              ShelfLife:"",
              WarningDays:"",
              Descr:"",
            },
        }
        },
        methods: {
          generateCode() {
      // 生成随机大写字母
      const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));

      // 生成当前日期
      const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');

      // 生成4个随机数字
      const randomDigits = Math.floor(1000 + Math.random() * 9000);

      // 组合成编号
      return randomLetter + currentDate + randomDigits;
    },
         //查询
        fill(){
        axios.get('http://localhost:5084/api/Productinformation/FenYe/FenYe',{
            params: {
            pageSize: this.pageSize,
            currentPage: this.currentPage
       }
        })
          .then(res => {
            this.data = res.data;
            this.totalRecords = res.data.length;
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize); // 计算总页数
          })
       },
       //添加
 addFrom() {
  const gys=this.insertAdd.Supplier.toString();
  const jhr=this.insertAdd.Customer.toString();
   this.orderNumber = this.generateCode();
      
        axios.post("http://localhost:5084/api/Productinformation/Add", {
            p_ProductName:this.insertAdd.Name,
            p_ProductCode:this.orderNumber,
            p_ProductType:this.insertAdd.hpType,
            p_SpecificationModel:this.insertAdd.Model,
            p_Supplier:gys,
            p_CustomerName:jhr,
            p_InboundPrice:this.insertAdd.Inbound,
            p_OutboundPrice:this.insertAdd.Outbound,
            p_DisplayOrder:this.insertAdd.Order,
            p_Unit:this.insertAdd.Unit,
            p_CurrentStock:this.insertAdd.CurrentStock,
            p_ProductStatus:this.insertAdd.Status,
            p_ShelfLifeManagement:this.insertAdd.ShelfLifeManagement,
            p_ShelfLife:this.insertAdd.ShelfLife,
            p_WarningDays:this.insertAdd.WarningDays,
            p_ProductDescr:this.insertAdd.Descr,
          })
          .then(res => {
            if (res) {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.insert = false;
              this.fill();
                 // 清空表单数据
            this.insertAdd.hpType = '';
            this.insertAdd.Name = '';
            this.insertAdd.Code = '';
            this.insertAdd.Supplier = '';
            this.insertAdd.Model = '';
            this.insertAdd.Customer = '';
            this.insertAdd.Inbound = '';
            this.insertAdd.Outbound = '';
            this.insertAdd.Order = '';
            this.insertAdd.Unit = '';
            this.insertAdd.TotalStockValue = '';
            this.insertAdd.Status = '';
            this.insertAdd.ShelfLifeManagement = '';
            this.insertAdd.ShelfLife = '';
            this.insertAdd.WarningDays = '';
            this.insertAdd.Descr = '';
            }
          })
          .catch(err => {
            this.$message({
              message: '添加失败！',
              type: 'error'
            });
          });
      
  },
  upd(row){
        this.uinsert=true;
        this.Yiji();
        this.Gys();
        this.Khhu();
        this.insertUpd.id=row.p_ProductId;
        this.insertUpd.isDelete=row.p_PIsDelete;
        this.insertUpd.Ren=row.p_PRen;
        this.insertUpd.Date=row.p_PDate;
        this.insertUpd.Name=row.p_ProductName;
        this.insertUpd.Code=row.p_ProductCode;
        this.insertUpd.hpType=row.p_ProductType;
        this.insertUpd.Model=row.p_SpecificationModel;
        this.insertUpd.Supplier=row.p_Supplier;
        this.insertUpd.Customer=row.p_CustomerName;
        this.insertUpd.Inbound=row.p_InboundPrice;
        this.insertUpd.Outbound=row.p_OutboundPrice;
        this.insertUpd.Order=row.p_DisplayOrder;
        this.insertUpd.Unit=row.p_Unit;
        this.insertUpd.CurrentStock=row.p_CurrentStock;
        this.insertUpd.TotalStockValue=row.p_TotalStockValue;
        this.insertUpd.Status=row.p_ProductStatus;
        this.insertUpd.ShelfLifeManagement=row.p_ShelfLifeManagement;
        this.insertUpd.ShelfLife=row.p_ShelfLife;
        this.insertUpd.WarningDays=row.p_WarningDays;
        this.insertUpd.Descr=row.p_ProductDescr;
      },
      //修改保存
      updFrom(){
        const gys=this.insertUpd.Supplier.toString();
  const jhr=this.insertUpd.Customer.toString();
        axios.put("http://localhost:5084/api/Productinformation/Update", {
          p_ProductId:this.insertUpd.id,
          p_ProductCode:this.insertUpd.Code,
          p_ProductName:this.insertUpd.Name,
          p_ProductStatus:this.insertUpd.Status,
          p_ProductType:this.insertUpd.hpType,
          p_SpecificationModel:this.insertUpd.Model,
          p_Unit:this.insertUpd.Unit,
          p_Supplier:gys,
          p_CustomerName:jhr,
          p_InboundPrice:this.insertUpd.Inbound,
          p_OutboundPrice:this.insertUpd.Outbound,
          p_DisplayOrder:this.insertUpd.Order,
          p_CurrentStock:this.insertUpd.CurrentStock,
          p_TotalStockValue:this.insertUpd.TotalStockValue,
          p_ShelfLifeManagement:this.insertUpd.ShelfLifeManagement,
          p_ShelfLife:this.insertUpd.ShelfLife,
          p_WarningDays:this.insertUpd.WarningDays,
          p_PRen:this.insertUpd.Ren,
          p_PDate:this.insertUpd.Date,
          p_ProductDescr:this.insertUpd.Descr,
          p_PIsDelete:this.insertUpd.isDelete,
  }).then(res => {
    if (res) {
      this.$message({
        message: '修改成功！',
        type: 'success'
      });

      this.uinsert = false;
      this.fill(); // 重新填充销售机会列表
    }
  })
  .catch(err => {
    this.$message({
      message: '修改失败！',
      type: 'error'
    });
  });
      },
  //点击按钮删除
  del: function (sale) {
    if (confirm("确定删除吗")) {
        var t = this;
        axios.put(`http://localhost:5084/api/Productinformation/UpdIsDelete/UpdIsDelete?id=${sale.p_ProductId}&&isDeleted=${false}`)
            .then(function (response) {
                // 根据后台返回的结果处理相应逻辑
                if (response.data > 0) {
                    alert("删除成功");
                    t.fill(); // 如果删除成功，重新加载数据
                } else {
                    alert("删除失败");
                }
            })
            .catch(function (error) {
                console.error(error);
                alert("删除失败");
            });
    }
},
       query() {
  // 查询数据逻辑
  const { Key, Status } = this.search;
  axios.get('http://localhost:5084/api/Productinformation/FenYe/FenYe', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      Key: Key,
      Status: Status,
    } 
  }).then((response) => {
    this.data = response.data;
  }).catch((error) => {
    console.log(error);
  });
},
handleCascaderChange(value) {
        // 获取选中的 value 和 label
    const selectedValue = value[value.length - 1];
    const selectedLabel = this.getLabelByValue(selectedValue);
    this.insertAdd.hpType = selectedValue.toString();
    // 打印选中的 value 和 label
    console.log('选中的 label 的值:', selectedLabel);
    console.log('选中的 value 的值:', selectedValue);
  },
  getLabelByValue(value) {
    // 在 options 中查找对应 value 的 label
    const findLabel = (options, value) => {
      for (const item of options) {
        if (item.value === value) {
          return item.label;
        }
        if (item.children) {
          const label = findLabel(item.children, value);
          if (label) {
            return label;
          }
        }
      }
      return null;
    };
    
    return findLabel(this.options, value);
    },
  //一级下拉
Yiji() {
				axios.get("http://localhost:5084/api/ProductType")
					.then((response) => {
						this.options = response.data.map(item => {
							return {
								value: item.value,
								label: item.label,
								children: item.children
							};
						});
            console.log('获取到的数据:', this.options); // 打印获取到的数据
					})
					.catch((error) => {
						console.log(error);
					});
},
add() {
  this.insert = true;
  this.Yiji();
  this.Gys();
  this.Khhu();
},
//客户添加下拉框
Khhu(){
      axios.get('http://localhost:5084/api/Customermanagement/Qu',{              
          }).then((response)=>{
             this.tableData=response.data;
            console.log(this.tableData);
          }).catch((error)=>{
             console.log(error);
            
          })
    },
    //供应商添加下拉框
     Gys(){
        axios.get('http://localhost:5084/api/Suppliermanagement/Qu',{              
            }).then((response)=>{
               this.SutableData=response.data;
              
            }).catch((error)=>{
               console.log(error);
              
            })
      },
      handleSizeChange: function (size) {
				console.log(size);
				this.pageSize = size;
				this.fill();
  },
  handleCurrentChange: function (cpage) {
				console.log(cpage);
				this.currentPage = cpage;
				this.fill();
    },
//点击关闭弹框
cancel() {
  this.insert = false;
  this.uinsert = false;
},
clear() {
    // 清空搜索条件
  this.search.Key = '';
  this.search.Status = '';
  // 重新调用查询方法，以获取所有数据
  this.fill();
  },
       },
       mounted: function () {
    this.fill();
    //this.Yiji();
 }
}
</script>

<style scoped>
.cz
{
margin-right: 20px; 
width: 80px; 
height: 40px; 
background-color: white; 
color: black;
border-color: #C1C1C1;
margin-left: 20px;
}
.cx
{
   width: 80px;
   height: 40px; 
   color: white;
   background-color: #45B984; 
}
.bian
{
    margin:20px;
}
 .el-dialog {
    max-height: 70%;
  }
  .xin{
  width:1px;
  height:1px;
  color: red;
  position: relative;
  left: 20px; /* 根据需要调整星号的水平位置 */
  top: 32px; /* 根据需要调整星号的垂直位置 */
}
.xinx{
    width:1px;
  height:1px;
  color: red;
  position: relative;
  left: 0px; /* 根据需要调整星号的水平位置 */
  top: 10px; /* 根据需要调整星号的垂直位置 */
}
.xins{
    width:1px;
  height:1px;
  color: red;
  position: relative;
  left: 20px; /* 根据需要调整星号的水平位置 */
  top: 32px; /* 根据需要调整星号的垂直位置 */
}
</style>